// 等页面元素全部加载完毕再执行js文件 也是为了在头部引入js文件
// 11.开启节流阀 
window.addEventListener('load', function () {
    // 1.鼠标移动进focus时 显示左右切换按钮
    var focus = document.querySelector('.focus');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function () {
            // 使用手动调用事件
            next.click();
        }, 3000);
    });
    // 2. 动态生成底下的小圆圈 根据图片的张数决定
    var layer = focus.querySelector('.layer'); // 小圆圈
    var spin = focus.querySelector('.spin'); // 装图片的ul
    // console.log(spin.children.length);
    for (var i = 0; i < spin.children.length; i++) {
        var li = document.createElement('li');
        // 创建小li时给每个小li设置一个 自定义属性index 方便获取li的索引号 以移动ul
        li.setAttribute('index', i);
        // 将小li插入到ol中
        layer.appendChild(li);
        // 3. 每个li 小点都是可以点击的 并且点击之后会变色 
        // 所以我们需要给所有小点都加上监听事件 我们可以直接在生成li的时候添加
        li.addEventListener('click', function () {
            // 点击小点之后 自己会变色其他的都不会变 需要用到排他思想
            for (var i = 0; i < layer.children.length; i++) {
                layer.children[i].className = '';
            }
            this.className = 'current';
            // 4.点击小点切换图片 切换图片是移动ul而不是小li 点击第一个li是移动0*focus.offsetWidth(不动) 第二是移动2*focus.offsetWidth;
            // 如何获取li索引号 需要给每个小li加上一个自定义属性 index
            var index = this.getAttribute('index');
            console.log(focusWidth);
            console.log(index);
            animate(spin, -index * focusWidth);
            sign = circle = index;
        });
    }
    // 7. 在6的无缝衔接中是自己手动在结构中复制一个li 就会造成下面多一个小点 比图片多一张 这样时不行的
    // 需要通过js只能生成一个li 而且不会增加一个底下的导航点 
    // 通过cloneNode来实现复制小li 
    var first = spin.children[0].cloneNode(true);
    spin.appendChild(first)
    // 5.让右边的按钮可以点击 点击之后切换一张 做法：每次点击让sign自加1 再乘以spin的宽度
    var sign = 0;
    var circle = 0;
    var flag = true;
    next.addEventListener('click', function () {
        // 开启节流阀 
        if (flag == true) {
            flag = false;
            // 6.做到无缝衔接 点击next按钮 
            // 在结构里手动复制一张第一个li的图片放在最后面 
            if (sign == spin.children.length - 1) { //这里是有五个小li的
                spin.style.left = '0px';
                // animate(spin, 0); 
                sign = 0;
            }
            sign++;
            // 执行完动画后调用callback函数 
            animate(spin, -sign * focusWidth, function () {
                flag = true;
            });
            // 8.另外设置一个变量控制小圆圈的位置
            // 需要用排他策略
            circle++;
            if (circle == spin.children.length - 1) {
                circle = 0;
            }
            for (i = 0; i < layer.children.length; i++) {
                layer.children[i].className = '';
            }
            layer.children[circle].className = 'current';
        }
    });
    // 9.设置左侧切换图片按钮 
    prev.addEventListener('click', function () {
        if (flag == true) {
            flag = false;
            // 走到最后一张时
            // 过程 上一次sign是1 
            // 点击prev 判断是否=0; 
            // 否 sign-- = 0; 走到0px的位置(第一张的位置)
            // 2. -----------------------------------------------------
            // 点击prev 判断是否=0; 
            // 是 让spin的第一张放到focus里面; 0px的位置 ----> 现在加上这次是两次的第一张图片显示再focus里面 但是这里次会立马被执行掉 直接跳到第三张图片的位置
            // 是 sign = 4;(spin.children.length - 1);
            // 立马执行一次animate 到了第三张图片的位置
            if (sign == 0) {
                // 让spin走回最后一张图片的位置(就是clone第一张的那张图片)
                spin.style.left = -(spin.children.length - 1) * focusWidth + 'px';
                sign = spin.children.length - 1;
            }
            // sign等于几就是第几张的下标 good
            sign--;
            animate(spin, -sign * focusWidth, function () { flag = true });
            // 设置导航小点的样式 跟随prev按钮而移动
            circle--;
            if (circle < 0) {  // circle是小点的下标 
                circle = 3;
                // 这里涉及到circle++ 写到前面还是后面的问题 
                // 这里是要写到前面的 因为有0下标这个点 =0 之后再马上++ 就执行不到第一个小点的样式 加上current
            }
            // 添加之前要排它 
            for (var i = 0; i < layer.children.length; i++) {
                layer.children[i].className = '';
            }
            layer.children[circle].className = 'current';
        }
    });
    // 将第一个小点设置为选中状态 加上current类名
    layer.children[0].className = 'current';
    // 10.每隔3秒自动播放一张图片 类似点击一次next按钮
    // 鼠标在focus里面就停止自动播放
    var timer = setInterval(function () {
        // 使用手动调用事件
        next.click();
    }, 3000);

    //下面使用的jQuery写的 侧边导航栏
    // *
    // *
    // *
    // *
    // *
    // *
    // *
    // *
    // console.log($(".lifeservice").offset().top); // 360px
    var ls = $(".lifeservice").offset().top;
    function toggleTool() {
        if ($(document).scrollTop() > ls) {
            $(".fixedtool").css("position", "fixed");
            $(".fixedtool").css("top", "10px");
        } else {
            $(".fixedtool").css("position", "absolute");
            $(".fixedtool").css("top", "360px");
        }
        // 2.到了位置显示返回按钮
        if ($(document).scrollTop() > $(".guess").offset().top) {
            $(".fixedtool li:last-child").css("display", "block");
        } else {
            $(".fixedtool li:last-child").css("display", "none");
        }
    }
    //每次刷新就执行一次函数
    toggleTool();

    var flag = true;
    // 1.页面移动到 .lifeservice 时改为固定定位
    $(window).scroll(function () {
        // 1.到了位置变为固定定位 bug-在页面中间刷新后 电梯导航不会显示 因为是页面移动才会显示; 解决: 每次刷新都调用一次函数(执行一次)
        toggleTool();

        // 5.滚动页面 侧边的li相应的变化 
        // 用each
        if (flag) {
            $(".floor .w").each(function (i, ele) { //each也在监听器里面 一直会监听到里面到条件语句符合条件
                // 被卷去的头部到达了 每层楼 offset().top
                if ($(document).scrollTop() >= $(ele).offset().top) { // 页面到达某个位置 变换当前的li
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
                    // bug 残留 写一个返回顶部的按钮 放在最后一个小li 点击会变色 
                }
            })
        }
    });
    // 3.点击返回 返回顶部
    // $(".fixedtool li:last-child").click(function () {
    //     $("body, html").stop().animate({
    //         scrollTop: 0
    //     });
    // });
    // 4.点击电梯的层数跳到对应的内容
    // 做法
    // (1).点击哪个就获取他的索引号 
    // (2).求出每个楼层的offset值

    // bug 点击切换按钮会有 滚动页面 滚动页面就会触发滚动的事件 从而造成bug
    $(".fixedtool li").click(function () {
        flag = false;
        var indexs = $(this).index();
        // 点击了第四个就执行返回顶部的操作
        if (indexs == 4) {
            // 3.点击返回 返回顶部
            $("body, html").stop().animate({
                scrollTop: 0
            });
        } else {
            // 点击1234 则是跳到对应的楼层
            console.log(indexs);
            var current = $(".floor .w").eq(indexs).offset().top + 1; // 两边的计算会有误差 导致点击侧边栏会造成移动后 没有达到适当的位置 而又触发了滚动事件 造成current的li对不准 + 1我就不在滚动触发的事件里面
            console.log(current);
            $("body, html").stop().animate({
                scrollTop: current
            }, function () {
                flag = true;
            })
        };

        // 点击哪个li就让哪个变为红色
        $(this).addClass("current").siblings().removeClass("current");
    });
});